<template>
    <div class="expand-container">
        <div class="expand-card">
            <div class="expand-bg">
                <div class="fan-container">
                    <ul class="fan-handle">
                        <li :class="handleClass" v-for="i in content.list.length"
                            :style="handleStyle(content.list.length, i - 1, content.deg)"></li>
                    </ul>
                    <ul class="fan-content">
                        <li :class="contentClass" v-for="(item, i) in content.list"
                            :style="pageStyle(content.list.length, i, content.deg)"><span>{{ item }}</span></li>
                    </ul>
                    <div class="fan-cover"></div>
                </div>
            </div>
            <div class="expand-main">
                <img :src="content.img">
            </div>
            <div class="expand-content">
                <h1>{{ content.title }}</h1>
                <h2>{{ content.dynasty }}</h2>
                <p>{{ content.author }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Fan",
    props: ["fan"],
    data() {
        return {
            handleClass: "fan-h",
            contentClass: "fan-item",
            content: {
                deg: 3,//每个扇柄旋转角度
                title: "水调歌头",
                dynasty: "宋",
                author: "苏轼",
                list: [
                    "何似在人间",
                    "起舞弄清影",
                    "高处不胜寒",
                    "又恐琼楼玉宇",
                    "我欲乘风归去",
                    "今夕是何年",
                    "不知天上宫阙",
                    "把酒问青天",
                    "明月几时有",
                ],
                img: "/img/style/shanshui.png",
            }
        }
    },
    computed: {
        handleStyle: function(){
            return function (len, index, deg) {
                return this.calcFanHandleStyle(len, index, deg);
            }
        },
        pageStyle: function() {
            return function (len, index, deg) {
                return this.calcFanPageStyle(len, index, deg);
            }
        },
    },
    methods: {
        //计算扇柄样式
        calcFanHandleStyle(len, index, deg) {
            const mid = Math.trunc(len / 2);
            const mod = len % 2;
            let s = 0;
            if (mod == 0) {
                if (index == mid) {
                    s = 0.5 * deg;
                } else if (index == mid - 1) {
                    s = (-0.5) * deg;
                } else if (index < mid) {
                    s = (index - mid + 0.5) * deg;
                } else {
                    s = (index - mid + 0.5) * deg;
                }
            } else {
                if (index !== mid) {
                    s = (index - mid) * deg;
                }
            }
            return { "--s": s };
        },

        //计算扇叶样式
        calcFanPageStyle(len, index, deg) {
            const mid = Math.trunc(len / 2);
            const mod = len % 2;
            let s = 0;
            let v = 0;
            if (mod == 0) {
                if (index == mid) {
                    s = 1;
                    v = 0.5 * deg;
                } else if (index == mid - 1) {
                    s = -1;
                    v = (-0.5) * deg;
                } else if (index < mid) {
                    v = (index - mid + 0.5) * deg;
                    if ((mid - 1 - index) % 2 == 0) {
                        s = -1;
                    } else {
                        s = 1;
                    }
                } else {
                    v = (index - mid + 0.5) * deg;
                    if ((index - mid) % 2 == 0) {
                        s = 1;
                    } else {
                        s = -1;
                    }
                }
            } else {
                if (index == mid) {
                    s = 0;
                    v = 0;
                } else {
                    v = (index - mid) * deg;
                    if ((mid - index) % 2 == 0) {
                        s = -1;
                    } else {
                        s = 1;
                    }
                }
            }
            return { "--d": deg, "--s": s, "--v": v };
        },
    },
    created() {
        if (this.$props.fan) {
            this.content = this.$props.fan;
        }
    },
    mounted() {
        
    }
}
</script>

<style>
@import url("@/assets/css/style/fan.css");</style>